<template>
  <div class="home">
    <div class="container-box">
      <!-- 左边查询条件 -->
      <div class="select-left">
        <!-- 热点标签 -->
        <div class="hot-box">
          <div class="hot-title">热点标签</div>
          <div class="hot-item">
            <el-checkbox-group
              v-model="searchMoreForm.hotPoint"
              @change="getArchMainByMuchType()"
            >
              <div
                v-for="(item, index) in searchOption[0].archTypeAndNumDtoList"
                :key="index"
              >
                <el-checkbox :label="item.archTypeName">{{
                  item.archTypeName + " (" + item.count + ")"
                }}</el-checkbox>
              </div>
            </el-checkbox-group>
          </div>
        </div>
        <!-- 年度 -->
        <div class="hot-box">
          <div class="hot-title">提交年份</div>
          <div class="hot-item">
            <el-checkbox-group
              v-model="searchMoreForm.year"
              @change="getArchMainByMuchType()"
            >
              <div
                v-for="(item, index) in searchOption[1].archTypeAndNumDtoList"
                :key="index"
              >
                <el-checkbox :label="item.archTypeName">{{
                  item.archTypeName + " (" + item.count + ")"
                }}</el-checkbox>
              </div>
            </el-checkbox-group>
          </div>
        </div>
        <!-- 档案类别 -->
        <div class="hot-box">
          <div class="hot-title">档案类别</div>
          <div class="hot-item">
            <el-checkbox-group
              v-model="searchMoreForm.cateType"
              @change="getArchMainByMuchType()"
            >
              <div
                v-for="(item, index) in searchOption[2].archTypeAndNumDtoList"
                :key="index"
              >
                <el-checkbox :label="item.archTypeName">{{
                  item.archTypeName + " (" + item.count + ")"
                }}</el-checkbox>
              </div>
            </el-checkbox-group>
          </div>
        </div>
      </div>
      <!-- 右边数据列表 -->
      <div class="right-data">
        <div
          style="
            margin-top: 5px;
            color: #606266;
            font-size: 15px;
            display: flex;
          "
        >
          <div>
            <span>档案名称:</span>
            <el-input
              v-model="searchForm.archTitle"
              clearable
              placeholder="请输入检索的档案名称"
              style="width: 180px; margin-right: 10px"
              size="small"
            />
          </div>
          <!-- <div>
            档案类别:<el-select
              v-model="searchForm.archCateCode"
              placeholder=""
              style="margin-right: 10px; width: 100px"
              clearable
              size="small"
            >
              <el-option
                v-for="item in categoryOptions"
                :key="item.archCateCode"
                :label="item.archCateName"
                :value="item.archCateCode"
              />
            </el-select>
          </div> -->
          <div>
            保管期(月):<el-select
              v-model="searchForm.archPeriod"
              style="margin-right: 10px"
              size="small"
              clearable
              filterable
              allow-create
              default-first-option
              placeholder="请输入或者选择保管期"
            >
              <el-option
                v-for="item in archPeriodOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <!-- <div>
            提交的年份:<el-date-picker
              v-model="searchForm.submitYear"
              type="year"
              placeholder="选择年份"
              style="margin-right: 10px; width: 120px"
              size="small"
            />
          </div> -->
          <div>
            浏览次数:<el-input
              v-model="searchForm.visitCount"
              style="margin-right: 10px; width: 100px"
              size="small"
              clearable
              placeholder="输入次数"
            />
          </div>
          <div>
            借阅次数:
            <el-input
              v-model="searchForm.borrowCount"
              placeholder="输入借阅次数"
              clearable
              style="width: 140px"
              size="small"
            />
          </div>
          <!-- <div class="search-more-box">
            <el-tooltip
              class="item"
              effect="dark"
              content="更多检索条件"
              placement="top"
            >
              <el-button
                :icon="moreSearch ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                size="small"
                :type="moreSearch ? 'primary' : ''"
                @click="moreSearch = !moreSearch"
              />
            </el-tooltip>
            <div v-show="moreSearch" class="search-content-box">
              <div>
                借阅次数:
                <el-input
                  v-model="searchForm.borrowCount"
                  placeholder=""
                  clearable
                  style="margin-top: 10px; width: 140px"
                  size="small"
                />
              </div>
              <div style="margin-top: 20px">
                热点标签:
                <el-input
                  v-model="searchForm.archDeptHotName"
                  placeholder="请输入热点标签"
                  style="margin-top: 10px; width: 140px"
                  size="small"
                  clearable
                />
              </div>
            </div>
          </div> -->
          <div style="margin-left: 10px">
            <el-button
              type="primary"
              size="small"
              @click="getData()"
            >检索</el-button>
          </div>
        </div>
        <div class="table" style="margin-top: 10px">
          <el-table
            v-loading="isLoading"
            border
            :data="listData"
            style="width: 70vw"
          >
            <el-table-column
              align="center"
              prop="archMainCode"
              width="200"
              label="档案编号"
            />
            <el-table-column align="center" prop="archTitle" label="档案名称" />
            <el-table-column
              align="center"
              prop="archCateCode"
              label="档案类别"
            >
              <template slot-scope="scope">
                <span
                  v-for="(item, index) in categoryOptions"
                  v-show="scope.row.archCateCode === item.archCateCode"
                  :key="index"
                >{{ item.archCateName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="archPeriod"
              label="保管期(月)"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.archPeriod === 0">永久</span>
                <span v-else>{{ scope.row.archPeriod }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="归档状态">
              <template slot-scope="scope">
                <span
                  v-if="scope.row.archState === 0"
                  class="warning"
                >预归档</span>
                <span
                  v-if="scope.row.archState === 1 || scope.row.archState === 2"
                  class="primary"
                >接收待审核</span>
                <span
                  v-if="scope.row.archState === 3"
                  class="danger"
                >驳回</span>
                <span
                  v-if="scope.row.archState === 5"
                  class="success"
                >归档接受</span>
                <span
                  v-if="scope.row.archState === 10"
                  class="info"
                >档案封存</span>
              </template>
            </el-table-column>
            <!-- <el-table-column align="center" label="档案访问许可">
              <template slot-scope="scope">
                <span v-if="scope.row.accessState === 0">公开</span>
                <span v-else>隐藏</span>
              </template>
            </el-table-column> -->
            <el-table-column
              align="center"
              prop="visitCount"
              label="浏览次数"
            />
            <el-table-column
              align="center"
              prop="borrowCount"
              label="借阅次数"
            />
            <el-table-column
              align="left"
              fixed="right"
              label="操作"
              width="230"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="detail(scope.row)"
                >详情</el-button>
                <el-button
                  v-if="scope.row.haveDetail === '1'"
                  size="mini"
                  type="primary"
                  plain
                  @click="knowDetail(scope.row)"
                >知识化</el-button>
                <el-button
                  type="primary"
                  size="mini"
                  @click="borrow(scope.row)"
                >借阅</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination">
          <el-pagination
            :current-page.sync="page.pageNum"
            :page-sizes="[10, 20, 50]"
            :page-size="page.pageSize"
            layout="sizes,total,  prev, pager, next"
            :total="page.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>

    <el-dialog title="详情" :visible.sync="detailDialog" width="45%">
      <el-form :model="selectRow" label-position="right" label-width="140px">
        <!-- <el-form-item label="档案交付单位">
      <span>{{ selectRow.delivUnit }}</span>
    </el-form-item> -->
        <!-- <el-form-item label="档案分类">
      <span>{{ selectRow.archCateName }}</span>
    </el-form-item> -->
        <el-form-item label="档案名称">
          <div class="item-div">{{ selectRow.archTitle }}</div>
        </el-form-item>
        <el-form-item label="档案编号">
          <div class="item-div">{{ selectRow.archMainCode }}</div>
        </el-form-item>
        <el-form-item label="热点标签">
          <el-tag v-if="selectRow.archDeptHotName" type="success">{{
            selectRow.archDeptHotName
          }}</el-tag>
          <span v-else>暂无热点标签</span>
        </el-form-item>
        <el-form-item label="档案保管期(月)">
          <div class="item-div">
            {{ selectRow.archPeriod === 0 ? "永久" : selectRow.archPeriod }}
          </div>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-if="selectRow.notes"
            v-model="selectRow.notes"
            class="input form-width"
            type="textarea"
            :rows="3"
          />
          <span v-else>暂无备注</span>
        </el-form-item>
        <!-- <el-form-item label="档案规范其他需求">
    <el-input v-model="addForm.archRequireOther"></el-input>
  </el-form-item> -->
        <el-form-item label="档案附件">
          <span
            v-for="item in fileList"
            :key="item.archFilesId"
            type="primary"
            style="display: block"
          >{{ item.fileName }}</span>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="detailDialog = false">关闭</el-button>
      </div>
    </el-dialog>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <div style="text-align: center">
        <el-form
          :model="addArchApplicationForm"
          label-width="80px"
          label-position="right"
        >
          <el-form-item label="借阅天数" style="text-align: left">
            <el-input-number
              v-model="addArchApplicationForm.during"
              :step="12"
              style="width: 50%"
              oninput="this.value = this.value.replace(/[^0-9]/g, '');"
              placeholder="0为永久"
            />
            <span style="margin-left: 10px">天</span>
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              v-model="addArchApplicationForm.notes"
              type="textarea"
              :rows="3"
            />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="handleSubmitDuring()"
        >确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="知识化" :visible.sync="readDialogVisible" width="70%">
      <div class="detail-box">
        <div>
          档案编号:
          <span class="right-content">{{ labelDetailItem.archMainCode }}</span>
        </div>
        <div class="detail-content-box">
          <div class="detail-content-left">档案标题:</div>
          <div v-if="labelDetailItem.list.total > 0" class="lbl-content">
            <div
              class="detail-content-right detail-left"
              v-html="labelDetailItem.item.lblContent"
            />
            <div class="detail-label-box">
              <div
                v-for="(label, labelIndex) in labelDetailItem.list.records"
                :key="labelIndex"
                :style="{ border: '1px solid' + label.labelColor }"
                class="detail-label-item-box"
                @click="clickLabel(label)"
              >
                <div class="label-top-box">
                  <div
                    class="label-color-box"
                    :style="{ background: label.labelColor }"
                  />
                  <div>
                    {{ label.labelName }}
                  </div>
                </div>
                <div class="detail-label-content" :title="label.lblContent">
                  {{ label.lblContent }}
                </div>
              </div>
            </div>
          </div>
          <div
            v-else
            class="detail-content-right"
            v-html="labelDetailItem.item.lblContent"
          />
        </div>
        <div>
          备注:
          <span class="right-content">{{
            labelDetailItem.notes ? labelDetailItem.notes : "暂无备注"
          }}</span>
        </div>
      </div>
      <div slot="footer">
        <el-button @click="readDialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  qryAllArchMainByType,
  updateCount,
  queryFilesById,
  getTypeAndNum,
  getArchMainByMuchType
} from '@/api/archManage'
import { getSingleLabelMain } from '@/api/knowMan'
import { getAllCategory } from '@/api/archCategory'
import { addArchApplication } from '@/api/archApplication'
export default {
  data() {
    return {
      userInfo: {},
      authType: '',
      isLoading: false,
      addForm: {
        archDeptClassName: '',
        archMainCode: '',
        archTitle: '',
        delivUnit: '',
        archPeriod: '',
        archRequireOther: '',
        archState: '',
        auditors: '',
        accessState: '',
        notes: ''
      },
      listData: [],
      detailDialog: false,
      selectRow: {},
      fileList: [],
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 10
      },
      categoryOptions: [],
      archCateCode: '',
      dialogVisible: false,
      during: '',
      searchForm: {
        archTitle: '',
        archCateCode: '',
        archPeriod: '',
        archDeptCode: '',
        username: '',
        staffCode: '',
        visitCount: '',
        borrowCount: '',
        submitYear: '',
        archDeptHotName: ''
      },
      moreSearch: false,
      archPeriodOptions: [{
        value: 0,
        label: '永久'
      }, {
        value: 12,
        label: '12'
      }, {
        value: 24,
        label: '24'
      }],
      addArchApplicationForm: {
        during: '',
        notes: ''
      },
      readDialogVisible: false,
      labelDetailItem: {
        list: {
          total: 0

        },
        item: {
          lblContent: ''
        }
      },

      hotPoint: [],
      searchOption: [{
        archTypeAndNumDtoList: []
      }, {
        archTypeAndNumDtoList: []
      }, {
        archTypeAndNumDtoList: []
      }],
      searchMoreForm: {
        hotPoint: [],
        year: [],
        cateType: []
      }
    }
  },
  created() {
    this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
    this.authType = sessionStorage.getItem('authType')
    this.getData()
    this.getAllCategory()
    this.getTypeAndNum()
  },
  methods: {
    // 获取列表数据
    getData() {
      this.isLoading = true
      const { pageNum, pageSize } = this.page
      const param = {
        pageNum: pageNum,
        pageSize: pageSize,
        ...this.searchForm,
        archPeriod: this.searchForm.archPeriod ? this.searchForm.archPeriod : -1,
        visitCount: this.searchForm.visitCount ? this.searchForm.visitCount : 0,
        borrowCount: this.searchForm.borrowCount ? this.searchForm.borrowCount : 0,
        archState: 5,
        accessState: 0
      }
      qryAllArchMainByType(param)
        .then((res) => {
          if (res.code === '0') {
            this.listData = res.data.records
            this.page.total = parseInt(res.data.total)
          }
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    // 获取分类列表
    getAllCategory() {
      getAllCategory({
        pageNum: -1,
        pageSize: -1
      }).then((res) => {
        if (res.code === '0') {
          const list = [
            {
              archCateCode: '',
              archCateName: '全部',
              archCateId: '',
              archRequireOther: '',
              createtime: '',
              archCateType: 0,
              notes: ''
            }
          ]
          this.categoryOptions = list.concat(res.data.records)
        }
      })
    },
    // 按左边条件检索
    getArchMainByMuchType() {
      if (this.searchMoreForm.hotPoint.length === 0 && this.searchMoreForm.year.length === 0 && this.searchMoreForm.cateType.length === 0) {
        this.getData()
        return
      }
      const param = {
        ...this.searchMoreForm,
        pageNum: 1,
        pageSize: 10
      }
      getArchMainByMuchType(param).then((res) => {
        console.log(res)
        if (res.code === '0') {
          this.listData = res.data.records
          this.page.total = parseInt(res.data.total)
        }
      })
    },
    // 获取档案借阅查询条件
    getTypeAndNum() {
      getTypeAndNum().then((res) => {
        this.searchOption = res.data
        this.getArchMainByMuchType()
      })
    },
    addCurArch() {
      this.$router.push('/archManage/currentArchiving')
    },
    detail(row) {
      this.isLoading = true
      // 更新浏览和借阅次数
      updateCount({ type: 1, archMainId: row.archMainId })
      this.selectRow = row
      queryFilesById({ archMainCode: row.archMainCode })
        .then((res) => {
          if (res.code === '0') {
            this.fileList = res.data
          }
        })
        .finally(() => {
          this.detailDialog = true
          this.isLoading = false
        })
    },
    borrow(row) {
      this.row = row
      this.dialogVisible = true
    },
    handleSubmitDuring() {
      if (this.addArchApplicationForm.during) {
        addArchApplication({
          ...this.addArchApplicationForm,
          staffCode4App: this.userInfo.username
            ? this.userInfo.username
            : this.userInfo.staffCode,
          appState: 0,
          archMainId: this.row.archMainId,
          archMainCode: this.row.archMainCode
        }).then((res) => {
          if (res.code === '0') {
            this.$message({
              type: 'success',
              message: '已发起借阅申请，请联系负责人进行审核'
            })
            this.dialogVisible = false
          }
        })
        return
      }
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getData()
    },
    // 点击打开知识化的内容
    knowDetail(row) {
      getSingleLabelMain({
        archLblId: row.archLblId
      }).then((res) => {
        this.readDialogVisible = true
        this.labelDetailItem = { ...res }
      }).catch((err) => {
        console.log(err)
      })
    }
  }
}
</script>

<style scoped>
.home {
  margin: 20px;
}

.search-input {
  width: 200px;
}

.pagination {
  width: auto;
  display: flex;
  margin-top: 10px;
  align-items: center;
}
.item-div {
  padding: 0px 15px;
  border: 1px solid #eee;
  border-radius: 4px;
  width: 80%;
}
.search-more-box {
  position: relative;
}
.search-content-box {
  position: absolute;
  left: -40px;
  margin-top: 5px;
  background: white;
  border: 1px solid #eee;
  border-radius: 5px;
  padding: 20px 10px 20px 10px;
  box-shadow: 4px 3px 5px rgb(145 145 145 / 60%);
  z-index: 99;
}
.danger {
  color: #f56c6c;
}
.primary {
  color: #409eff;
}
.success {
  color: #67c23a;
}
.warning {
  color: #e6a23c;
}
.info {
  color: #909399;
}
div /deep/ .el-dialog {
  margin-top: 40px !important;
  border-radius: 8px;
}
div /deep/ .el-dialog__body {
  padding: 0 25px;
}

.detail-box {
  font-size: 16px;
  line-height: 30px;
}
.right-content {
  margin-left: 8px;
}
.detail-content-box {
  display: flex;
}
.detail-content-left {
  width: auto;
  white-space: nowrap;
  margin-right: 10px;
}
.detail-content-right {
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 7px 10px;
}
.lbl-content {
  display: flex;
  width: 100%;
}
.detail-left {
  min-width: 50%;
  display: flex;
  align-items: center;
}
.detail-label-box {
  min-width: 200px;
}
.detail-label-item-box {
  padding: 5px 10px;
  border-radius: 10px;
  margin-bottom: 4px;
  margin-left: 10px;
}
.label-top-box {
  display: flex;
  align-items: center;
}
.label-color-box {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  margin-right: 10px;
}
.detail-label-content {
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  font-size: 13px;
  line-height: 26px;
}

.file-box {
  display: flex;
  align-items: center;
}
.download-file {
  color: #409eff;
  cursor: pointer;
}
.label-detail-box {
  font-size: 18px;
  font-weight: bold;
  height: 30px;
  line-height: 30px;
}

.container-box {
  display: flex;
  justify-content: space-between;
}
.select-left {
  width: 20vw;
  margin-right: 10px;
}
.hot-box {
  border: 1px solid #eee;
  border-radius: 4px;
  margin-top: 10px;
}
.hot-title {
  background: #f5f7fa;
  padding: 10px;
}
.hot-item {
  padding: 10px;
  line-height: 24px;
}
.right-data {
  width: 80vw;
}
</style>
